import {Form, Input, Modal,Image} from "antd";
import {useState} from "react";
import CommodityMap from "@/components/CommodityMap";

const AnchorAdd = (props:any) => {
  const {isModalAnchor,modalOk,modalCancel} = props
  const [isModalGoodsImage,setIsModalGoodsImage] = useState(false) // 定义显示商品图像modal
  const [src,setSrc] = useState('https://images.uiiiuiii.com/wp-content/uploads/2019/11/itz-logo20191115-2-33.jpg')
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Modal
      title="添加主播"
      visible={isModalAnchor}
      onOk={modalOk}
      onCancel={modalCancel}
    >
      <Form
        labelCol={{ span: 24 }}
        wrapperCol={{ span: 24 }}
        name='basic'
        initialValues={{ remember: true }}
        onFinishFailed={onFinishFailed}
        onFinish={onFinish}
      >
        <Form.Item
          label="主播名称"
          name="username"
          rules={[{ required: true, message: '请输入主播名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="主播微信号"
          name="weixin"
          rules={[{ required: true, message: '请输入主播微信号' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="主播手机号"
          name="phone"
          rules={[{ required: true, message: '请输入主播电话号' }]}
        >
          <Input type={"phone"}/>
        </Form.Item>
        <Form.Item
          label="主播图像"
          name="username"
        >
          <Image
            width={80}
            style={{cursor: 'pointer'}}
            src={src}
            preview={false}
            onClick={()=>{
              setIsModalGoodsImage(true)
            }}
          />
        </Form.Item>
      </Form>
      {/* 主播图像modal */}
      <CommodityMap
        title='请选择主播图像'
        isModalGoodsImage={isModalGoodsImage}
        goodsCancel={()=>{
          setIsModalGoodsImage(false)
        }}
      />
    </Modal>
  );
};

export default AnchorAdd;
